<template>
    <div class='main-wrapper'>
        <div>
            <pre>{{data}}</pre>
        </div>
        <div>
            <Tree :data='data' >

            </Tree>
        </div>
        <div>
            <pre>{{dataMap}}</pre>
        </div>
    </div>    
</template>
<script>
import data from './data'
export default {
    data(){
        return {
            data,
            dataMap:{}
        }
    },
    mounted(){
        this.expandData(this.data);
    },
    methods:{
        expandData(d){
            Array.isArray(d)&&d.map(c=>{
                this.$set(this.dataMap,c._id,c);
                this.$set(c,'title',c.title||c.label);
                this.$set(c,'expand',true);
                c.children&&this.expandData(c.children);
            })
        },
    }
}
</script>

<style lang="less" scoped>
    .main-wrapper {
        margin: 20px;
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: 1fr auto;
        grid-gap: 2px;
        >div{
            border: 2px solid rgb(241, 115, 12);
            padding: 5px;
            border-radius: 5px;
        }
    }
</style>
